<template>
	<view>
		<view class="uni-media-list" @tap="goMessage(value.list_id,key,value.no_reader_num)" v-for="(value,key) of data" :key="key">
			<view class="bg-progress" :style="{width: value.progress + '%'}"></view>
			<view class="uni-media-list-logo">
				<image :src="staticPhoto + value.photo_path + '?_=' + imgRan" :lazy-load="true" style="border-radius: 12upx;" />
			</view>
			
			<view class="red_num">
				<uni-badge :text="value.no_reader_num" type="error" />
			</view>
			
			<view class="uni-media-list-body">
				<view class="uni-media-list-text-top custom-list-text-top">
					<view class="text-limit" style="float: left;">{{value.show_name}}</view>
					<view style="float: right;color: #8f8f94;font-size: 23upx;">
						{{timestampFormat(value.time)}}
					</view>
				</view>
				<view class="uni-media-list-text-bottom uni-ellipsis text-limit">{{msgHandle(value.last_msg+'')}}</view>
				<view class="list-text-progress">{{value.progress}}%</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import _get from '../../common/_get';
	import _data from '../../common/_data';
	import _action from '../../common/_action';
	export default {
		data() {
			return {
				list: [],
				data: []
			}
		},
		onShow() {
			let that = this;
			_get.getWorkChatList();
			
			uni.$on('data_work_chat_list',function(data){
				that.list = data;
			});
		},
		computed: {
			staticPhoto(){
				return _data.staticPhoto();
			},
			imgRan(){
				return Math.random();
			},
		},
		onNavigationBarSearchInputChanged(e) {
			let that = this;
			this.data = [];
			if(e.text.length) {
				this.list.forEach(item => {
					if(item.show_name.indexOf(e.text) != -1) {
						that.data.push(item)
					}
				})
			}
		},
		onNavigationBarButtonTap(e) {
			uni.navigateBack({
				delta: 1
			})
		},
		methods: {
			goMessage(list_id,key,no_reader_num){
				let _this = this
				if(no_reader_num > 0) {
					_get.getChatData({
						send_data: {
							list_id: list_id,
							time: 0,
							is_up: 1,
						},
						is_action_data: 1,
					});
					this.list[key].no_reader_num = 0;
					// _data.localData('work_chat_list',this.list);
					_action.updataNoReader(list_id);
					_get.getWorkChatList();
				}
				_data.localData('message_list_id',list_id);
				uni.navigateTo({
					url: '../chat/message?list_id=' + list_id,
				});
			},
			msgHandle(msg){
				return msg.replace(/&lt;/g,'<');
			},
			timestampFormat(time){
				return _action.timestampFormat(time);
			},
		}
	}
</script>

<style>
	.uni-media-list {
		width: 100%;
		position: relative;
		background-color: #fff;
	}
	
	.bg-progress {
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: rgba(72,169,197,.1);
	}
	
	.uni-media-list-logo {
		height: 85upx;
		width: 85upx;
	}
	
	.red_num {
		position: absolute;
		height: 34upx;
		top: 7upx;
		left: 95upx;
		font-size: 23upx !important;
	}
	
	.text-limit {
		width: 400rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.list-text-progress {
		position: absolute;
		right: 20rpx;
		bottom: 15rpx;
		font-size: 25rpx;
		color: #999;
	}
	
	.uni-swipe-action {
		width: 750upx !important;
	}
</style>
